<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <tree-table
            class="treeTable" 
            :expand-type="false"
            :show-row-hover="false"
            show-index
            index-text="#"
            border
            :selection-type="false"
            :data="cateList" 
            :columns="columns">
                <template slot="isok" slot-scope="scope">
                    <i style="color:lightgreen;" v-if="scope.row.cat_deleted===false" class="el-icon-success"></i>
                    <i class="el-icon-error" v-else style="color:lightgreen;"></i>
                </template>
                <template slot="order" slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                    <el-tag size="mini" v-else-if="scope.row.cat_level===1" type="success">二级</el-tag>
                    <el-tag size="mini" v-else type="warning">三级</el-tag>
                </template>
                <template slot="opt">
                    <el-button type="primary" size="mini" class="el-icon-edit">编辑</el-button>
                    <el-button type="danger" size="mini" class="el-icon-delete">删除</el-button>
                </template>
            </tree-table>  
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[3,5,10,15]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

        </el-card>
        <el-dialog
            title="添加分类"
            :visible.sync="addCateDialogVisible"
            width="50%" @close="addCateDialogClosed">
            <el-form ref="addCateFormRef" :model="addCateForm" 
            label-width="80px" :rules="addCateFormRules">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" prop="cat_pid">
                    <el-cascader
                        expandTrigger="hover"
                        :options="parentCateList"
                        :props="cascaderProps"
                        v-model="selectedKeys"
                        @change="parentCateChanged"
                        clearable change-on-select>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            cateList:[],
            // 查询条件
            queryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            total:0,
            // 
            columns:[
                { label: "分类名称", prop: "cat_name" },
                { label: "是否有效", type: "template", template: "isok" },
                { label: "排序", type: "template", template: "order" },
                { label: "操作", type: "template", template: "opt" },
            ],
            addCateDialogVisible:false,
            addCateForm:{
                cat_name:"",
                // 添加的分类的父id
                cat_pid:"",
                cat_level:""
            },
            addCateFormRules:{
                cat_name:[
                    { required:true, message:"请输入分类名称", trigger:"blur" }
                ],
            },
            parentCateList:[],
            cascaderProps:{
                value:"cat_id",
                label:"cat_name",
                children:"children"
            },
            // 选中的父级分类
            selectedKeys:[]
        }
    },
    created(){
        this.getCateList()
    },
    methods:{
        async getCateList(){
            const { data:res } = await this.$http.get("categories",{params:this.queryInfo})
            if(res.meta.status!==200)   return  this.$message.console.error("请求失败");
            this.total = res.data.total
            this.cateList = res.data.result
        },
        // 监听pagesize变化
        handleSizeChange(newSize){
            this.queryInfo.pagesize = newSize
            this.getCateList()
        },
        // 监听pagenum的变化
        handleCurrentChange(newPage){
            this.queryInfo.pagenum = newPage
            this.getCateList()
        },
        showAddCateDialog(){
            this.getParentCateList()
            this.addCateDialogVisible = true
        },
        // 获取父级分类数据列表
        async getParentCateList(){
            const { data: res } = await this.$http.get("categories",{
                params: { type: 2 }
            })
            if(res.meta.status!==200)   return this.$message.error("获取父级分类失败")
            console.log(res.data)
            this.parentCateList = res.data
        },
        parentCateChanged(){
            console.log(this.selectedKeys)
            // selectedKey.length大于0则选了父类
            // 反之则没有中父类 添加的一级分类
            if(this.selectedKeys.length>0){
                this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1]
                this.addCateForm.cat_level = this.selectedKeys.length
            }else{
                 this.addCateForm.cat_pid = 0
                 this.addCateForm.cat_level = 0
            }

        },
        addCate(){
            this.$refs.addCateFormRef.validate( async valid => {
                if(!valid)  return
                const { data:res } = await this.$http.post("categories",
                this.addCateForm)
                if(res.meta.status!==201)   return this.$message.error("添加分类失败")
                this.$message.success("添加分类成功")
                this.getCateList()
                this.addCateDialogVisible = false
            })
            console.log(this.addCateForm)
        },
        addCateDialogClosed(){
            this.$refs.addCateFormRef.resetFields()
            this.selectedKeys = []
            this.addCateForm.cat_level = 0
            this.addCateForm.cat_pid = 0

        }
    },
}
</script>
<style scoped>
    .treeTable{
        margin-top: 15px;
    }
</style>